<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>忘记密码</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    {load href="__STATIC__/global/bootstrap/css/bootstrap.min.css" /}
    {load href="__STATIC__/global/bootstrap/css/font-awesome.min.css" /}
    {load href="__STATIC__/global/Amaranjs/amaran.min.css" /}
    {load href="__STATIC__/system/dist/css/AdminLTE.min.css" /}
    <!--[if lt IE 9]>
    {load href="__STATIC__/system/dist/js/html5shiv.min.js" /}
    {load href="__STATIC__/system/dist/js/respond.min.js" /}
    <![endif]-->
    <style>
    	html {
	  height: 100%;
	  background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
	  background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
	  
  
	}

	body {
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  overflow: hidden;
       background-color: transparent !important;
		}
	canvas{
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		z-index: -9;
		position: absolute;
	}

  .login-logo{
      
     
   margin: 0 auto;
    
  }
    .login-logo>a{
        color: #fff;
    }
    .login-box-body{
   
       border-radius: 10px;
       margin-top: 100px;
       background-color: transparent;
          box-shadow: 0 0 92px 13px rgba(255, 255, 255, 0.4);
}
    .login-box-body input{
     border-radius: 5px;
     border: none;
 }
    .login-logo, .register-logo {
        font-size: 38px;
        white-space: nowrap;
        text-align: center;
        margin-bottom: 72px;
        font-weight: bold;
        letter-spacing: 4px;
    }
    .login-box-body a{
        color: #666;
        font-size: 10px;
        letter-spacing: .5px;
    }
    .login{
        border-radius: 5px !important;
        border: none;
        padding: 0;
        outline:none !important;
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="1349" height="404"></canvas>
<div class="login-box">
    <div class="login-logo"><a href="#">重置密码</a></div>
    <div class="login-box-body">
        <!--<p class="login-box-msg">请填写用户名密码登陆系统</p>-->
        <form action="{:url('User/forget_pas')}" method="POST" onsubmit="return false" >
            <div class="form-group has-feedback">
                <input type="text" class="form-control" name="mobile" placeholder="手机" id="mobile">
                <span class="glyphicon form-control-feedback fa fa-user fa-lg"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" name="password" placeholder="设置新密码">
                <span class="glyphicon form-control-feedback fa fa-lock fa-lg"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" name="re_password" placeholder="再次输入新密码">
                <span class="glyphicon form-control-feedback fa fa-lock fa-lg"></span>
            </div>
            <div class="row form-group">
                <div class="col-xs-6">
                    <input class="form-control" name="code" placeholder="验证码" autocomplete="off">
                </div>
                <div class="col-xs-4">
                    <!--<img src="{:captcha_src()}" id="code" alt="captcha" onclick="this.src='{:captcha_src()}?rnd=' + Math.random();" />-->
                    <button type="button" class="btn btn-primary " style=" transform: scale(1.0);width: 146px;padding:0;" id = "send_code" >获取手机验证码 </button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-8"><a href="{:url('user/login')}">用户登录</a></div>
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat login" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 提交">提交</button>
                </div>
            </div>
          
        </form>
    </div>
    
</div>
{load href="__STATIC__/global/jQuery/jquery-2.2.3.min.js" /}
{load href="__STATIC__/global/bootstrap/js/bootstrap.min.js" /}
{load href="__STATIC__/global/jQuery/jquery.form.js" /}
{load href="__STATIC__/global/jQuery-gDialog/animate.min.css" /}
{load href="__STATIC__/global/Amaranjs/jquery.amaran.min.js" /}
{load href="__STATIC__/system/dist/js/login.js" /}
    <script type="text/javascript">


    let inputlist = document.querySelectorAll("input");
    let glyphicon = document.querySelectorAll(".glyphicon");
    for (let k = 0; k < inputlist.length; k++) {
        inputlist[k].onfocus = function () {
            let glyphiconvalue = glyphicon[k];
            glyphiconvalue.style.color = "#1890FF";
        }

        inputlist[k].onblur = function () {
            let glyphvalue = glyphicon[k];
            glyphvalue.style.color = "#666";
        }

    }


        //测试 路径属性
        var o = document.getElementsByTagName("body")[0];
        var num = 200;
        var w = window.innerWidth;
        var h = o.offsetHeight;
        var max = 100;
        var _x = 0;
        var _y = 0;
        var _z = 150;
    var dtr = function (d) {
        return d * Math.PI / 180;
    };

    var rnd = function () {
        return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
    };
    var dist = function (p1, p2, p3) {
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
    };

    var cam = {
            obj: {
            x: _x,
        y: _y,
        z: _z
    },
        dest: {
            x: 0,
        y: 0,
        z: 1
    },
        dist: {
            x: 0,
        y: 0,
        z: 200
    },
        ang: {
            cplane: 0,
        splane: 0,
        ctheta: 0,
        stheta: 0
    },
    zoom: 1,
        disp: {
            x: w / 2,
        y: h / 2,
        z: 0
    },
        upd: function () {
            cam.dist.x = cam.dest.x - cam.obj.x;
        cam.dist.y = cam.dest.y - cam.obj.y;
        cam.dist.z = cam.dest.z - cam.obj.z;
        cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
        cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
        cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
        cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
    }
};

    var trans = {
            parts: {
            sz: function (p, sz) {
                return {
            x: p.x * sz.x,
        y: p.y * sz.y,
        z: p.z * sz.z
    };
},
            rot: {
            x: function (p, rot) {
                    return {
            x: p.x,
        y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
        z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
    };
},
                y: function (p, rot) {
                    return {
            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
        y: p.y,
        z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
    };
},
                z: function (p, rot) {
                    return {
            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
        y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
        z: p.z
    };
}
},
            pos: function (p, pos) {
                return {
            x: p.x + pos.x,
        y: p.y + pos.y,
        z: p.z + pos.z
    };
}
},
        pov: {
            plane: function (p) {
                return {
            x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
        y: p.y,
        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
    };
},
            theta: function (p) {
                return {
            x: p.x,
        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
    };
},
            set: function (p) {
                return {
            x: p.x - cam.obj.x,
        y: p.y - cam.obj.y,
        z: p.z - cam.obj.z
    };
}
},
        persp: function (p) {
            return {
            x: p.x * cam.dist.z / p.z * cam.zoom,
        y: p.y * cam.dist.z / p.z * cam.zoom,
        z: p.z * cam.zoom,
        p: cam.dist.z / p.z
    };
},
        disp: function (p, disp) {
            return {
            x: p.x + disp.x,
        y: -p.y + disp.y,
        z: p.z + disp.z,
        p: p.p
    };
},
        steps: function (_obj_, sz, rot, pos, disp) {
            var _args = trans.parts.sz(_obj_, sz);
        _args = trans.parts.rot.x(_args, rot);
        _args = trans.parts.rot.y(_args, rot);
        _args = trans.parts.rot.z(_args, rot);
        _args = trans.parts.pos(_args, pos);
        _args = trans.pov.plane(_args);
        _args = trans.pov.theta(_args);
        _args = trans.pov.set(_args);
        _args = trans.persp(_args);
        _args = trans.disp(_args, disp);
        return _args;
    }
};

    (function () {
            "use strict";
        var threeD = function (param) {
            this.transIn = {};
        this.transOut = {};
        this.transIn.vtx = (param.vtx);
        this.transIn.sz = (param.sz);
        this.transIn.rot = (param.rot);
        this.transIn.pos = (param.pos);
    };

        threeD.prototype.vupd = function () {
            this.transOut = trans.steps(

                this.transIn.vtx,
                this.transIn.sz,
                this.transIn.rot,
                this.transIn.pos,
                cam.disp
            );
        };

        var Build = function () {
            this.vel = 0.04;
        this.lim = 360;
        this.diff = 200;
        this.initPos = 100;
        this.toX = _x;
        this.toY = _y;
        this.go();
    };

        Build.prototype.go = function () {
            this.canvas = document.getElementById("canvas");
        this.canvas.width = window.innerWidth;
        this.canvas.height = o.offsetHeight;
        this.$ = canvas.getContext("2d");
        this.$.globalCompositeOperation = 'source-over';
        this.varr = [];
        this.dist = [];
        this.calc = [];

            for (var i = 0, len = num; i < len; i++) {
            this.add();
        }

            this.rotObj = {
            x: 0,
        y: 0,
        z: 0
    };
            this.objSz = {
            x: w / 5,
        y: h / 5,
        z: w / 5
    };
};

        Build.prototype.add = function () {
            this.varr.push(new threeD({
                vtx: {
                    x: rnd(),
                    y: rnd(),
                    z: rnd()
                },
                sz: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                rot: {
                    x: 20,
                    y: -20,
                    z: 0
                },
                pos: {
                    x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                    y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                    z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
                }
            }));
        this.calc.push({
            x: 360 * Math.random(),
        y: 360 * Math.random(),
        z: 360 * Math.random()
    });
};

        Build.prototype.upd = function () {
            cam.obj.x += (this.toX - cam.obj.x) * 0.05;
        cam.obj.y += (this.toY - cam.obj.y) * 0.05;
    };

        Build.prototype.draw = function () {
            this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
        cam.upd();
        this.rotObj.x += 0.1;
        this.rotObj.y += 0.1;
        this.rotObj.z += 0.1;

            for (var i = 0; i < this.varr.length; i++) {
                for (var val in this.calc[i]) {
                    if (this.calc[i].hasOwnProperty(val)) {
            this.calc[i][val] += this.vel;
        if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
    }
}

                this.varr[i].transIn.pos = {
            x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
    };
    this.varr[i].transIn.rot = this.rotObj;
    this.varr[i].transIn.sz = this.objSz;
    this.varr[i].vupd();
                if (this.varr[i].transOut.p < 0) continue;
        var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
        this.$.globalCompositeOperation = 'lighter';
        g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
        g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
        g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
        this.$.fillStyle = g;
        this.$.beginPath();
        this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
        this.$.fill();
        this.$.closePath();
    }
};
        Build.prototype.anim = function () {
            window.requestAnimationFrame = (function () {
                return window.requestAnimationFrame ||
                    function (callback, element) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();
        var anim = function () {
            this.upd();
        this.draw();
        window.requestAnimationFrame(anim);
    }.bind(this);
    window.requestAnimationFrame(anim);
};

        Build.prototype.run = function () {
            this.anim();

        window.addEventListener('mousemove', function (e) {
            this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
        this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
    }.bind(this));
            window.addEventListener('touchmove', function (e) {
            e.preventDefault();
        this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
        this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
    }.bind(this));
            window.addEventListener('mousedown', function (e) {
                for (var i = 0; i < 100; i++) {
            this.add();
        }
    }.bind(this));
            window.addEventListener('touchstart', function (e) {
            e.preventDefault();
        for (var i = 0; i < 100; i++) {
            this.add();
        }
    }.bind(this));
};
var app = new Build();
app.run();
})();
    window.addEventListener('resize', function () {
            canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;
    }, false);


$('#send_code').on('click',function () {
    var mobile = $('#mobile').val();
    if(mobile == ''){
        $.amaran({'message':'请输入手机号'});
        return false;
    }else{
        if(!(/^1[3456789]\d{9}$/.test(mobile))){
            $.amaran({'message':'请输入正确的手机号'});
            return false;
        }
    }
    //发送验证码
    $.ajax({
        url:"{:url('user/send_code')}",
        data:{'mobile':mobile},
        success:function (res) {
            if(res.code == 0){
                // $(this).html();
                $('#send_code').css("pointer-events","none");
                var time = 60;
                var set = setInterval(function () {
                    $('#send_code').html("(" + --time + ")秒后重新获取");
                }, 1000);
                setTimeout(function () {
                    $('#send_code').css("pointer-events","auto").html("重新获取验证码");
                    clearInterval(set);
                }, 60000);
            }
            // console.log(res);
            $.amaran({'message':res.msg});

        }
    })
    return false;
})



</script>


</body>
</html>
